<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <input type="text" id="msg">
  <button id="sendMsgBtn">发送</button>
</head>
<body>
<script>
sendMsgBtn.addEventListener('click',(e)=>{
    let value = msg.value;
    console.log(value);
    send(value)
})
var websocket = null;
//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
    websocket = new WebSocket("ws://192.168.0.107:7777/room/000001");
} else {
    alert('当前浏览器 Not support websocket');
}

//连接发生错误的回调方法
websocket.onerror = function () {
    showMsg("WebSocket连接发生错误");
};

//连接成功建立的回调方法
websocket.onopen = function () {
    showMsg("WebSocket连接成功");
}

//接收到消息的回调方法
websocket.onmessage = function (event) {
    showMsg(event.data);
}

//连接关闭的回调方法
websocket.onclose = function () {
    showMsg("WebSocket连接关闭");
}

//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
    closeWebSocket();
}

//将消息显示在网页上
function showMsg(msg) {
    console.log(msg)
}

//关闭WebSocket连接
function closeWebSocket() {
    websocket.close();
}

//发送消息
function send(msg) {
    websocket.send(msg);
}

</script>
</body>
</html>
